<template>
	<div class="g-container" :class="{ 'is-collapse': isCollapse }">
		<aside-nav></aside-nav>
		<header-box></header-box>
		<section class="g-main">
			<transition name="fade-transverse" mode="out-in">
				<keep-alive :include="keepAlives">
					<router-view></router-view>
				</keep-alive>
			</transition>
		</section>
	</div>
</template>

<script>
import { mapState } from 'vuex';
export default {
	components: {
		AsideNav: () => import('@/components/AsideNav'),
		HeaderBox: () => import('@/components/HeaderBox'),
	},
	data() {
		return {
			isCollapse: document.documentElement.clientWidth <= 1366 ? true : false,
		};
	},
	provide() {
		return {
			layout: this,
		};
	},
	computed: {
		...mapState(['keepAlives']),
	},
};
</script>

<style lang="scss" scoped>
.g-main {
	padding: 16px;
}
</style>
